<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js//myAjax.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<table id="tb" border="0" align="center" width="700px">
			<tr>
				<td colspan="2">
					<img src="../img/a1.jpg"width="500px" height="320"/>
				</td>
			</tr>
			<tr id="t1">
				<td>
					<textarea id="content" style="width: 600px;" name="c.content" rows="" cols=""></textarea>
				</td>
				<td><input type="button" name="" id="addComment" value="添加评论" /></td>
			</tr>
		</table>

		<script type="text/javascript">
			//页面加载后将数据库数据展示出来
			$(function () {
				$.ajax({
					url:"/ajaxday02/comment/selectAll",
					dataType:"JSON",
					success:function (result) {
						//result 是个json对象  即JS对象  是服务器返回的json字符串对应的json对象 这里是list集合
						var html = "";
						console.log($(result).length);
						$(result).each(function (i,obj) {
							//obj也是json对象  是list集合内的每一个comment对象
							html += '<tr>\n' +
									'\t\t\t\t<td width="600px">'+obj.content+'</td>\n' +
									'\t\t\t\t<td><button class="bt" aaa="">[点赞]</button><span>'+obj.zan+'</span></td>\n' +
									'\t\t\t</tr>';
							$("button").attr("aaa",obj.id);
						});
						$("#tb").append(html);
					}
				});

			});

			//添加评论的点击事件
			$("#addComment").click(function () {
				//获取评论内容  按传参的格式 封装到data中
				var data = $("#content").serialize();
				//调用jQuery封装的ajax请求方法
				$.ajax({
					url:"/ajaxday02/comment/add",
					data:data,
					dataType: "JSON",
					success:function (result) {
						//这里响应回来的result是个map集合  是个json对象
						var html="";
						if(result.flag){
							var obj = result.comment;
							html += '<tr>\n' +
									'\t\t\t\t<td width="600px">'+obj.content+'</td>\n' +
									'\t\t\t\t<td><button class="bt" aaa="">[点赞]</button><span>0</span></td>\n' +
									'\t\t\t</tr>';
							$("button").attr("aaa",obj.id);
							$("#tb").append(html);
							$("#content").val("");
						}
					},
					error:function () {
						alert("请求响应失败");
					}
				});
			});

				//点赞按钮的点击事件  因为是动态增加的子标签  所以要使用事件委托
              //将子标签的特定事件委托给父标签对象
                $("#tb").on("click",".bt",function () {
                	var bt = $(this);
                	console.log(bt);
                	var data = bt.attr("aaa");
					$.ajax({
						url:"/ajaxday02/comment/update",
						data:"c.id="+data,
						dataType:"JSON",
						success:function (result) {
							console.log(result);
							if(result.flag){
								var i = bt.next().html();
								console.log(i);
								i++;
								bt.next().html(i);
							}
						}
					})
				});

		</script>
	</body>
</html>
